<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>类式组件中的构造器</title>
</head>
<body>
    <!-- 引入React核心库 -->
    <script src="../JS/react.development.js"></script>
    <!-- 引入ReactDOM，用于支持react操作DOM -->
    <script src="../JS/react-dom.development.js"></script>
    <!-- 引入babel 用于将书写的JSX语法 编译成JS语法 -->
    <script src="../JS/babel.min.js"></script>
    <!-- 老版本的 传递限制 依赖库 15版本 16版本 以后 废弃 -->
    <script src="../JS/prop-types.js"></script>


    <div id="test1"></div>
    <div id="test2"></div>
    <div id="test3"></div>


    <script type="text/babel">
        class Person extends React.Component{
            // 限制  此处 写法 可 见 复习中的 类的基本知识 static 给类本身添加属性 而不是 给 类的实例对象 添加属性
            static propTypes = {
                name:PropTypes.string.isRequired,
                age:PropTypes.number,       
                sex:PropTypes.string,
            }
            static defaultProps = {
                sex:'女',
                age:14
            }


            constructor(props){
                // 构造器 是否 接受 props,是否传给 super(), 取决于:是否希望在构造器 中 通过this访问props
                // 视频 注解 构造器 能省略 就 省略  开发中 几乎不写
                super(props)
                console.log(this.props) //这个地方 可以通过打印 this.props 和 props 来 查看区别
            }

            render(){
                const {name,age,sex} = this.props
                // props 是 只读 的
                // this.props.name = 'Jack'        //此行代码会报错,应为Props是 只读的
                return(
                    <ul>
                        <li>姓名:{name}</li>
                        <li>性别:{sex}</li>
                        <li>年龄:{age}</li>
                    </ul>
                )
            }
        } 
        
        ReactDOM.render(<Person name="Altria" />,document.getElementById('test1'))
       
    </script>


</body>
</html>